<template>
    <div class="filmTour">
        <div class="center-title">
            <img src="@/assets/img/nlzx-title-bg.png" alt="">
            <span>影片巡礼</span>
            <img src="@/assets/img/nlzx-title-bg.png" alt="">
        </div>
        <div class="center-sub-title">Film Tour</div>

        <div class="swiper-box">
            <swiper
                :loop="swiperOptions.loop"
                :autoplay="swiperOptions.autoplay"
                :navigation="swiperOptions.navigation"
                :slidesPerView="swiperOptions.slidesPerView"
                :centeredSlides="swiperOptions.centeredSlides"
                :coverflowEffect="swiperOptions.coverflowEffect"
                :speed="swiperOptions.speed"
                :delay="swiperOptions.delay"
                :spaceBetween="swiperOptions.spaceBetween"
                @swiper="onSwiper"
                @slideChange="onSlideChange"
                @mouseenter="mouseEnter"
                @mouseleave="mouseLeave">
                <swiper-slide v-for="(item, i) in filmData" :key="i">
                    <div class="slide-item">
                        <img class="img" :src="item.img" alt="">
                    </div>
                </swiper-slide>
            </swiper>
            <button class="_btn next_btn"></button>
            <button class="_btn pre_btn"></button>
        </div>
    </div>
</template>

<script>
    import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue'
    import SwiperCore, {
        Autoplay,
        EffectCoverflow,
        Navigation,
        Pagination
    } from 'swiper'
    import 'swiper/swiper-bundle.css'
    SwiperCore.use([EffectCoverflow, Autoplay, Navigation, Pagination])
    export default {
        name: 'filmTour',
        components: { Swiper, SwiperSlide },
        setup() {
            let mySwipers
            const filmData = [
                { name: '玉楼春', img: require('@/assets/img/film/film1.jpg') },
                { name: '双镜', img: require('@/assets/img/film/film2.jpg') },
                { name: '尚食', img: require('@/assets/img/film/film3.jpg') },
                { name: '赘婿', img: require('@/assets/img/film/film4.jpg') },
                { name: '县委大院', img: require('@/assets/img/film/film5.jpg') },
                { name: '开端', img: require('@/assets/img/film/film6.jpg') },
                { name: '苍兰诀', img: require('@/assets/img/film/film7.jpg') },
                { name: '人世间', img: require('@/assets/img/film/film8.jpg') },
                { name: '长津湖', img: require('@/assets/img/film/film9.jpg') },
                { name: '小敏家', img: require('@/assets/img/film/film10.jpg') },
                { name: '20不惑2', img: require('@/assets/img/film/film11.jpg') },
                { name: '超越', img: require('@/assets/img/film/film12.jpg') },
                { name: '人生大事', img: require('@/assets/img/film/film13.jpg') },
            ]
            const swiperOptions = {
                slidesPerView: 5, // 解决最后一张切换到第一张中间的空白
                spaceBetween: 20,
                centeredSlides: true, // 设置slide居中
                effect: 'coverflow', // 切换效果
                coverflowEffect: {
                    rotate: 0,
                    depth: 0,
                    slideShadows: false
                }, // 3D界面
                navigation: {
                    nextEl: '.next_btn',
                    prevEl: '.pre_btn'
                }, // 自定义分页器
                autoplay: {
                    delay: 1000, // 自动切换的时间间隔
                    disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay
                },
                loop: true, // 开启循环
                speed: 800, // 切换速度
                clickable: true // 是否开启分页器
            }
            const onSwiper = (swiper) => {
                mySwipers = swiper
            };
            const onSlideChange = () => {
                // console.log('slide change');
            };
            const mouseEnter = () => {
                mySwipers.autoplay.stop()
            };
            const mouseLeave = () => {
                mySwipers.autoplay.start()
            };
            return {
                filmData,
                swiperOptions,
                onSwiper,
                onSlideChange,
                mouseEnter,
                mouseLeave
            };
        },
    }
</script>

<style scoped lang="less">
.filmTour {
    background: #FAFAFA;
    .center-title {
        padding-top: 40px;
        font-size: 32px;
        color: #313233;
        letter-spacing: 1.92px;
        font-weight: 500;

        span {
            margin: 0 10px;
            vertical-align: middle;
        }

        img {
            vertical-align: middle;
            width: 24px;
        }
    }
    .center-sub-title {
        margin-top: 0;
        font-size: 16px;
        color: #B0B5B8;
        letter-spacing: 0.96px;
        text-align: center;
        font-weight: 400;
    }
    .swiper-box {
        width: 1200px; margin: auto; padding-top: 20px; padding-bottom: 50px; position: relative;
        .slide-item {
            overflow: hidden;
            .img { width: 100%; transition: all 0.5s;}
            &:hover {
                .img { transform: scale(1.1)}
            }
        }
        ._btn {
            width: 40px; height: 60px; border-radius: 4px;
            cursor: pointer; background: #E0E0E0; border: none;
            position: absolute; top: 50%; margin-top: -30px; z-index: 999; opacity: .5; transition: all .3s;
        }
        ._btn:before {
            content: ''; display: block; width: 14px; height: 14px; border-color: #666; border-style: solid;
            transform: rotate(45deg);
        }
        .next_btn { left: 0;}
        .pre_btn { right: 0;}
        .next_btn:hover { opacity: 1; }
        .pre_btn:hover { opacity: 1; }
        .next_btn:before {
            border-width: 0 0 2px 2px; position: absolute; left: 16px; top: 23px;
        }
        .pre_btn:before {
            border-width: 2px 2px 0 0; position: absolute; right: 16px; top: 23px;
        }
        ._navigation {
            display: flex; align-items: center; padding-top: 10px;
        }
    }
}
</style>
